<script setup>

import {onMounted, ref} from 'vue';
import dateUtil from '@/utils/dateUtil';
import chartApi from "@/api/chart.js";
import * as echarts from 'echarts'

const chartRef = ref()
// 加载完成后再进行
onMounted(()=>{
  const myChart = echarts.init(chartRef.value);
  //本周的第一天
  const date = dateUtil.getMonday();
  //本周的每一天
  const days = dateUtil.getWeekDays();
/**/
  // 绘制图表
  let option = {
    title: {
      text: '课程预约人数对比图',
      textStyle: {
        color: '#161D23',
        fontWeight: 'bold',
        fontSize: '16px',
      },
      left: '10px',
      top: '10px',
    },
    legend: {
      top: '20px',
      right: '20px',
    },
    grid: {
      left: '3%',
      right: '30px',
      bottom: '3%',
      top: '60px',
      containLabel: true
    },
    tooltip: {},
    yAxis: {
      type: 'value',
    },
    xAxis: {
      axisLabel: {color: '#161D23'},
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],    // 显示标题
    },
    series: [
      {
        name: '会员增长',
        type: 'bar',
        data: [],   // 显示数据
        label: {
          show: true,
          color: '#50CEFF',
          position: 'top',
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        name: '预约人数',
        type: 'bar',
        data: [],   // 显示数据
        label: {
          show: true,
          color: '#50CEFF',
          position: 'top',
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  chartApi.selectUserCount(date).then(result => {
    const data = new Array(7).fill(0);
    for (let i=0; i<days.length; i++){
      for (let item of result.data){
        if (item.day == days[i]) {
          data[i] = item.count;
        }
      }
    }

    option.series[0].data = data;
    myChart.setOption(option);
  });

  chartApi.selectReserveCount(date).then(result => {
    const data = new Array(7).fill(0);

    for (let i=0; i<days.length; i++){
      for (let item of result.data){
        if (item.day == days[i]) {
          data[i] = item.count;
        }
      }
    }

    option.series[1].data = data;
    myChart.setOption(option);
  });
});

</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%">
  </div>

</template>

<style>

</style>
